<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>后台管理-登陆</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
      html, body {
          width: 100%;
          height: 100%;
          overflow: hidden
      }

      body {
          background: #1E9FFF;
      }

      body:after {
          content: '';
          background-repeat: no-repeat;
          background-size: cover;
          -webkit-filter: blur(3px);
          -moz-filter: blur(3px);
          -o-filter: blur(3px);
          -ms-filter: blur(3px);
          filter: blur(3px);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: -1;
      }

      .layui-container {
          width: 100%;
          height: 100%;
          overflow: hidden
      }

      .admin-login-background {
          width: 360px;
          height: 300px;
          position: absolute;
          left: 50%;
          top: 40%;
          margin-left: -180px;
          margin-top: -100px;
      }

      .logo-title {
          text-align: center;
          letter-spacing: 2px;
          padding: 14px 0;
      }

      .logo-title h1 {
          color: #1E9FFF;
          font-size: 25px;
          font-weight: bold;
      }

      .login-form {
          background-color: #fff;
          border: 1px solid #fff;
          border-radius: 3px;
          padding: 14px 20px;
          box-shadow: 0 0 8px #eeeeee;
      }

      .login-form .layui-form-item {
          position: relative;
      }

      .login-form .layui-form-item label {
          position: absolute;
          left: 1px;
          top: 1px;
          width: 38px;
          line-height: 36px;
          text-align: center;
          color: #d2d2d2;
      }

      .login-form .layui-form-item input {
          padding-left: 36px;
      }

      .captcha {
          width: 60%;
          display: inline-block;
      }

      .captcha-img {
          display: inline-block;
          width: 34%;
          float: right;
      }

      .captcha-img img {
          height: 34px;
          border: 1px solid #e6e6e6;
          height: 36px;
          width: 100%;
      }
  </style>
</head>
<body>
<div class="layui-container">
  <div class="admin-login-background">
    <div class="layui-form login-form">
      <form class="layui-form" action="">
        <div class="layui-form-item logo-title">
          <h1>LayuiMini后台登录</h1>
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-username" for="username"></label>
          <input type="text" name="username" lay-verify="required|account" placeholder="用户名或者邮箱"
                 autocomplete="off" class="layui-input" value="admin">
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-password" for="password"></label>
          <input type="password" name="password" lay-verify="required|password" placeholder="密码" autocomplete="off"
                 class="layui-input" value="123456">
        </div>
        <div class="layui-form-item">
          <label class="layui-icon layui-icon-vercode" for="captcha"></label>
          <input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off"
                 class="layui-input verification captcha" value="xszg">
          <div class="captcha-img">
            <img id="captchaPic" src="../images/captcha.jpg">
          </div>
        </div>
        <!--                <div class="layui-form-item">-->
        <!--                    <input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">-->
        <!--                </div>-->
        <div class="layui-form-item">
          <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../lib/jsencrypt/jsencrypt.js" charset="utf-8"></script>
<script src="../lib/base64/base64.min.js" charset="utf-8"></script>
<script src="../api/common.js" charset="utf-8"></script>
<script>
  layui.use(['form', 'jquery'], function () {
    var form = layui.form,
      layer = layui.layer;
    $ = layui.jquery;

    // 登录过期的时候，跳出ifram框架
    // if (top.location != self.location) top.location = self.location;

    // 粒子线条背景
    $(document).ready(function () {
      $('.layui-container').particleground({
        dotColor: '#7ec7fd',
        lineColor: '#7ec7fd'
      });
    });


    var encrypt = new JSEncrypt();
    var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQChIarNHyiuWuUhJVyZWnM1I4V8kKdjqW5qG+awNATynP6tq/dtj2zjhTo6yFpL4dYLXYVTHWJskxF68D/gga0+B12PUcR5QH4pobOFKD2xNhJiDxKdsP5zfTnEU39SJWXjeJJJNnGhpT+sz/Ng3e28TgKUaft5tAdcl32ioSx0YQIDAQAB";
    encrypt.setPublicKey(publicKey);
    form.on('submit(login)', function (data) {

      // var encryptor = new JSEncrypt()
      // encryptor.setPublicKey(KEY)
      // var password = encryptor.setPublicKey(KEY)
      // console.log('1234')


      data = data.field;
      if (data.username == '') {
        layer.msg('用户名不能为空');
        return false;
      }
      if (data.password == '') {
        layer.msg('密码不能为空');
        return false;
      }
      if (data.captcha == '') {
        layer.msg('验证码不能为空');
        return false;
      }
      console.log('123123123123', data)

      $.ajax({
        type: 'POST',
        url: local + 'login',
        data: {
          username: data.username,
          password: encrypt.encrypt(data.password),
        },
        dataType: "json",
        //headers: {
        //    "X-": $("input[name='A']").val()
        //},
        success: function (data) {//res为相应体,function为回调函数
          console.log('data', data.data.token)
          localStorage.setItem('token', data.data.token)
          // var alertIndex;
          // if (res.ResultCode === 0) {
          //     alert("成功！");
          //     //window.history.back()
          // }
          getUserInfo()
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          layer.alert('操作失败！！！' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus, {icon: 5});
        }
      });

      function getUserInfo() {
        $.ajax({
          type: 'GET',
          url: local + 'user/details',
          data: {
            // username: data.username,
            // password: encrypt.encrypt(data.password),
          },
          dataType: "json",
          headers: {
            // "X-": $("input[name='A']").val()
            'Authorization': `Bearer ${ localStorage.getItem("token") }`,
          },
          success: function (res) {//res为相应体,function为回调函数
            console.log('data', res)
            if (res.code === 200) {
              if (res.data) {
                // var userinfo = Base64.encode(JSON.stringify(res.data))
                localStorage.setItem('userInfo', JSON.stringify(res.data))
                window.location = '../index.html';
              }
            }
            // console.log('data', data.data.token)

            // var alertIndex;
            // if (res.ResultCode === 0) {
            //     alert("成功！");
            //     //window.history.back()
            // }
            // getUserInfo()
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            layer.alert('操作失败！！！' + XMLHttpRequest.status + "|" + XMLHttpRequest.readyState + "|" + textStatus, {icon: 5});
          }
        });
      }
      // $.ajax({url:local+'login',data: {username: data.username,password: ''},dataType: 'get',success:function(result){
      //
      //     }});
      // layer.msg('登录成功', function () {
      //     // console.log('123123123123',data)
      //     // window.location = '../index.html';
      // });
      return false;
    });
  });
</script>
</body>
</html>
